<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: header(~{::title},~{::link},~{})">

    <title>填报率汇总</title>
    <link rel="icon" th:href="@{/assets/img/lcxm.ico}" type="image/ico">
    <link rel="stylesheet" th:href="@{/assets/css/common.css}">
</head>
<body class="body">
<!--导航-->
<div th:replace="common/nav :: nav(true)"></div>
<div class="container">

    <div class="row row-nocol">


        <form class="form-inline lookup" role="form" method="post">

            <div class="form-group" style="margin-left: 5px">
                <label class="control-label" for="lookup-date">填报日期: </label>
                <div class="input-group">
                    <input class="datetime form-control input-sm" id="lookup-date" name="date" type="text"
                           th:value="${date}"
                           data-date-format="yyyy-mm-dd" data-min-view="2"
                           data-picker-position="bottom"
                           data-end-date-target="now" readonly placeholder="填报日期"/>
                </div>
            </div>
            <div class="form-group pull-right">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="glyphicon glyphicon-search"></i> 查询
                </button>
                <button type="button" class="btn btn-info btn-sm reset">
                    <i class="glyphicon glyphicon-refresh"></i> 重置
                </button>
            </div>
        </form>

        <!--列表栏-->
        <form class="nocol">

            <table class="table table-striped  table-hover table-bordered stable">
                <caption >
                    应填报人数:<span th:text="${summary?.num}" class="lead label label-info"></span>;实际填报人数:<span class="label label-success" th:text="${summary?.filledNum}"></span>;
                    未填报人数:<span th:text="${summary?.unfilledNum}" class="label label-danger"></span>;填报率：<span th:text="${summary?.rate}" class="label label-primary"></span>
                </caption>
                <thead>
                <tr class="text-center">
                    <th>姓名</th>
                    <th>小组</th>
                    <th>日期</th>
                    <th>工时</th>
                </tr>
                </thead>
                <tbody align="center">
                <tr th:each="cur:${summary?.list}">
                    <td th:text="${cur.name}">name</td>
                    <td><span th:attr="data-random-label=${cur.groupId}" th:text="${cur.groupName}">group</span></td>
                    <td>
                        <a title="查看详情" data-toggle="tooltip"
                           th:onclick="clickDate([[${cur.id}]],[[${date}]])"
                           th:text="${date}">2021-12-12</a></td>
                    </td>
                    <td><span th:class="${cur.total == 0 ? 'label label-danger':'label label-success'}" th:text="${cur.total}"></span></td>
                </tr>
                <!-- </c:forEach> -->
                </tbody>
            </table>

        </form>
        <!--页码相关-->
    </div>


</div>

<!-- 引入通用js-->
<div th:replace="common/footer :: footer"></div>
<script>
    function clickContent(e) {
        $.alert({
            theme: 'bootstrap',
            title: '工作内容',
            content: e.title
        });
    }

    function clickDate(userId,date) {
        $.alert({
            theme: 'bootstrap',
            title: '当日工作详情',
            columnClass: 'col-md-10 col-md-offset-1',
            content: "url:" + (ctx + "report/day/detail?date="+date+"&userId=" + userId)
        });
    }

</script>
</body>
</html>